<template>
  <div class="card">
    <my-image class="my-img fade" :imgUrl="soursePath+data.imgUrl" @click.native="clickDetailsHandle"></my-image>
    <div class="card-content">
        <div class="name">{{data.itemName}}</div>
        <div class="dec">{{data.dec}}</div>
        <div class="bottom-div">
          <div class="price-div">
            <span class="price">{{data.price}}</span><span class="symbol">RMB</span>
          </div>
          <mt-button size="small" class="detail-btn" type="default">详情</mt-button>
        </div>
    </div>
  </div>
</template>

<script>
import myImage from "../../lazyloadImg/lazyImage.vue";
import Vue from "vue";
import { Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
Vue.component(Button.name, Button);
import { mapState } from "vuex";

export default {
  name: "v-card",
  props: {
    data: {
      type: Object
    }
  },
  components: {
    myImage
  },
  created() {},
  methods: {
    clickDetailsHandle(event) {
      // this.$router.push({ name: "details" });
    }
  },
  computed: {
    ...mapState(["openid", "role", "phoneno", "userid", "soursePath"])
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.card {
  overflow hidden;
  border-radius 0.02rem;
  box-shadow: 0 0 3px rgba(100, 100, 100, 0.1);

  .my-img {
    width: 100%;
    height: 1.5rem;
    background-color: #f1f1f1;
  }

  .card-content {
    // height: 0.38rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: .12rem 0.12rem .12rem 0.12rem;

    .name {
      // margin-top .3rem;
      color: #000;
      font-size: 0.16rem;
    }

    .dec{
      margin .06rem 0 .04rem 0;
      color: #999;
      font-size: 0.12rem;
      line-height 0.18rem;
    }

    .bottom-div {
      display flex;
      align-items center;
      justify-content space-between;
      .price-div {
        position: relative;
        top: 0.01rem;
        color: #e61874;

        .symbol {
          font-size: 0.13rem;
          margin-left: 0.03rem;
        }

        .price {
          font-size: 0.16rem;
        }
      }

      .detail-btn {
        height: 0.22rem;
        width .52rem;
        background-color: #fff;
        border 1px #eb9eb3 solid;
        color: #eb9eb3;
        font-size: 0.12rem;
        box-shadow: none;
        letter-spacing: 0.01rem;
      }
    }
  }
}
</style>
